<template>
    <div class="query-upload">
        <div class="title">我上传的记录</div>
        <div class="top">
            <Form inline label-position="left">
                <FormItem label="维修结算单编号">
                    <Input v-model.trim="searchData.statementNo" @click='search(true)' placeholder="输入车牌号码" style="width: 293px"></Input>
                </FormItem>
                <FormItem label="车牌号码">
                    <Input v-model.trim="searchData.plateNo" @click='search(true)' placeholder="输入车架号/VIN号" style="width: 293px"></Input>
                </FormItem>
                <FormItem label="车架号/VIN号">
                    <Input v-model.trim="searchData.VINCode" @click='search(true)' placeholder="输入车架号/VIN号" style="width: 293px"></Input>
                </FormItem>
                <FormItem label="维修类型">
                    <Select v-model.trim="searchData.repairType" placeholder="选择维修类型" clearable style="width:250px">
                        <Option v-for="item in repairType" :value="item.i" :key="item.i">{{ item.v }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="结算日期">
                    <DatePicker :value='searchData.fixDate' @on-change="fixDateChange" type="daterange" placement="bottom-start" placeholder="开始日期 至 结束日期" :options="DateOptions" style="width: 293px"></DatePicker>
                </FormItem>
                <FormItem label="标准化完成日期">
                    <DatePicker :value='searchData.complateDate' @on-change="complateDateChange" type="daterange" placement="bottom-start" placeholder="开始日期 至 结束日期" :options="DateOptions" style="width: 293px"></DatePicker>
                </FormItem>
                <FormItem label="上传日期">
                    <DatePicker :value='searchData.uploadDate' @on-change="uploadDateChange" type="daterange" placement="bottom-start" placeholder="开始日期 至 结束日期" :options="DateOptions" style="width: 293px"></DatePicker>
                </FormItem>
                <FormItem class="select-btns " label=" ">
                    <Button :loading='searchLoading' @click='search(true)' class="searchBtn btns " type="primary">筛&nbsp;选</Button>
                </FormItem>
                <FormItem class="select-btns reset-btn " label=" ">
                    <Button :loading='resetLoading' @click='reset' class="resetBtn btns " type="ghost">重&nbsp;置</Button>
                </FormItem>
            </Form>
        </div>
        <div class="bottom">
            <!-- 列表 -->
            <Table @on-sort-change='sortChange' :columns="tableCol" :data="tableData" :loading="tableLoading" stripe size="large"></Table>
            <!-- 分页器 -->
            <pagination class="parg" :total="totalPage" :current="currentPage" :pageSize='pageSize' @change="changePage"></pagination>
        </div>
    </div>
</template>
<script>
import repairType from 'commons/js/data/repairType.json'
import pagination from './../../commons/pagination'

export default {
    components: { pagination },
    data() {
        return {
            // 上部搜索框
            resetLoading: true, // 重置按钮加载中
            searchLoading: true, // 搜索按钮加载中
            repairType, // 维修类型json
            DateOptions: {  // 筛选日期
                disabledDate(date) {
                    return date && date.valueOf() > new Date();
                }
            },
            // plateNo,VINCode, startdate, enddate, source, sourceType, statementNo, repairType, repairName, set_start, set_end, xlsxStatus, xlsxPath, statusFix,
            searchData: { // 搜索数据
                statementNo: '', // 维修结算单编号
                plateNo: '', // 车牌号码
                VINCode: '', // 车架号/VIN号
                repairType: '', // 维修类型
                fixDate: '', // 结算日期
                complateDate: '', // 标准化完成日期
                uploadDate: '' // 上传日期
            },
            // 列表
            sort: 'desc', // desc/asc 维修结算日期筛选
            type: '',
            tableLoading: false, // 列表是否加载中
            tableData: [{
                statementNo: '', // 维修结算单编号
                VINCode: '', // 车架号/VIN号
                plateNo: '', // 车牌号码
                repairType: '', // 维修类型
                fixDate: '', // 结算日期
                complateDate: '', // 标准化完成日期
                uploadDate: '', // 上传日期
                _id: 23123,
            }],
            tableCol: [  // 表头设置
                {
                    title: '维修结算单编号',
                    key: 'statementNo',
                    align: 'center'
                },
                {
                    title: '车架号/VIN号',
                    key: 'VINCode',
                    align: 'center'
                },
                {
                    title: '车牌号码',
                    key: 'plateNo',
                    align: 'center'
                },
                {
                    title: '维修类型',
                    key: 'repairType',
                    align: 'center'
                },
                {
                    title: '结算日期',
                    key: 'fixDate',
                    align: 'center',
                    sortable: 'custom',
                    sortType: 'desc'
                },
                {
                    title: '标准化完成时间',
                    key: 'complateDate',
                    align: 'center',
                    sortable: 'custom',
                    sortType: 'desc'
                },
                {
                    title: '上传时间',
                    key: 'uploadDate',
                    align: 'center',
                    sortable: 'custom',
                    sortType: 'desc'
                },
                {
                    title: '操作',
                    key: 'check',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'text' },
                                style: { border: '0px', color: '#25BDFF' },
                                on: {
                                    click: () => {
                                        this.$router.push({ path: '/queryStatement/check', query: { id: params.row._id } })
                                    }
                                }
                            }, '查看详情')
                        ]);
                    }
                }
            ],
            //  分页器
            totalPage: 100,
            currentPage: 1,
            pageSize: 10,
        }
    },
    // created(){this.id = this.$route.query.id},
    created() { this.id = '58dcb137d66c063288b7c673' },
    mounted() { this.search(true) },
    methods: {
        // 列表渲染假数据
        mockTableData() {
            this.tableLoading = true
            let data = [];
            let len = this.pageSize ? this.pageSize : 10
            for (let i = 0; i < len; i++) {
                data.push({
                    statementNo: 'fakeData123012030000' + Math.floor(Math.random() * 1000 + 1),
                    plateNo: 'fakeData粤ABC' + Math.floor(Math.random() * 1000 + 1),
                    VINCode: 'fakeDataJHDGDPKHDBV129' + Math.floor(Math.random() * 1000 + 1),
                    repairType: this.getRepairType(Math.floor(Math.random() * 8)),
                    fixDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    complateDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    uploadDate: new Date(new Date().getTime() - Math.random() * 1000000000).Format("yyyy-MM-dd HH:mm:ss"),
                    _id: '1000' + Math.floor(Math.random() * 10000 + 1),
                })
            }
            // this.loading()
            setTimeout(_ => {
                this.tableLoading = false
            }, 1000)
            this.tableData = data
        },
        getRepairType(num) {
            for (let i = 0; i < repairType.length; i++) {
                // const el = repairType[i];
                // if (el.i == num) return el.v
                if (i == num) return repairType[i].v
            }
        },
        /////// 上部搜索框
        // 结算日期
        fixDateChange(date) {
            this.searchData.set_start = date[0]
            this.searchData.set_end = date[1]
        },
        // 标准化完成日期
        complateDateChange(date) {
            this.searchData.set_start = date[0]
            this.searchData.set_end = date[1]
        },
        // 上传日期
        uploadDateChange(date) {
            this.searchData.startdate = date[0]
            this.searchData.enddate = date[1]
        },
        // 重置
        reset() {
            this.searchData = {}
            this.search(true)
        },
        ////// 列表
        // 搜索
        search(isSelect) {
            let account = this.$utils.Storage.getObj('B_ACCOUNT');
            this.tableLoading = true
            this.resetLoading = true
            this.searchLoading = true
            let ajaxData = {}
            this.mockTableData()
            this.$ajax(this.$api.statement.maintenaceList, Object.assign({}, { id: account._id, page: this.currentPage, row: this.pageSize }, this.searchData), res => {
                // startdate,enddate,source,sourceType,statementNo,repairType,repairName,set_start,set_end,xlsxStatus,xlsxPath,statusFix,
                console.log('res', res);
                this.tableData = res.rows
                this.loading()
            }, (err) => { this.loading() })
            this.loading()
        },
        // 列表头 维修结算日期筛选
        sortChange(colObj) {
            if (colObj.order == 'normal') this.sort = 'desc'
            else this.sort = colObj.order
            switch (colObj.key) {
                case "complateDate":
                    this.type = 'complateDate'
                    break;
                case "fixDate":
                    this.type = "fixDate"
                    break;
                case "uploadDate":
                    this.type = "uploadDate"
                    break;
                default:
                    break;
            }
            console.log('colObj', colObj);
            this.search(true)
        },
        // table加载中
        loading() {
            setTimeout(() => {
                this.tableLoading = false
                this.resetLoading = false
                this.searchLoading = false
            }, 1000)
        },
        //////// 分页器
        changePage(pageObj) {
            this.currentPage = pageObj.page
            this.pageSize = pageObj.rows
            this.search(false)
        },
    },
}
</script>
<style lang="less" scoped>
.query-upload {
  background-color: #fff;
  .title {
    height: 50px;
    line-height: 50px;
    color: rgba(28, 36, 56, 1);
    font-size: 16px;
    font-weight: 700;
    padding-left: 30px;
  }
  .top {
    margin: 30px;
    border-bottom: 1px solid @color-Border;
    .ivu-form .ivu-form-item-label {
      font-size: 14px !important;
    }
    .select-btns {
      padding-top: 12px;
    }
    .reset-btn {
      // margin-right: 30px;
    }
  }
  .bottom {
    margin: 30px;
    .parg {
      padding: 20px 0 20px 30px;
    }
  }
}
</style>
